import '../base/index.css'
import * as THREE from 'three';
import { City } from './city.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export const initCity = () => {
  // 获取 canvas 元素
  const canvas = document.getElementById("webgl");

  // 创建 场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    100000
  );
  camera.position.set(1000, 500, 100);
  scene.add(camera);

  // 添加相机轨道控件
  const controls = new OrbitControls(camera, canvas);
  // 是否有惯性
  controls.enableDamping = true;
  // 是否可以缩放
  controls.enableZoom = true;
  // 最近和最远距离
  controls.minDistance = 100;
  controls.maxDistance = 2000;

  // 添加环境光
  scene.add(new THREE.AmbientLight(0xadadad));
  // 添加平行光
  const directionLight = new THREE.DirectionalLight(0xffffff);
  directionLight.position.set(0, 0, 0);
  scene.add(directionLight);

  // 创建 渲染器
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置像素比
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  // 设置背景颜色
  renderer.setClearColor(new THREE.Color(0x0000001), 1);

  const city = new City(scene, camera);

  const clock = new THREE.Clock();

  // 渲染
  const start = () => {
    city.start(clock.getDelta());
    // 更新相机控件
    controls.update();
    // 渲染场景
    requestAnimationFrame(start);
    renderer.render(scene, camera);
  };
  start();

  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    // 更新宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机的投影矩阵
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置像素比
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  });
}